<template>
  <div class="app-page">
    <el-tabs v-model="activeName" type="card" @tab-click="changeTab">
      <el-tab-pane label="预设电子围栏" name="fencePre">
        <fencePre ref="fencePre" />
      </el-tab-pane>
      <el-tab-pane label="正式电子围栏" name="fenceFormal">
        <fenceFormal ref="fenceFormal" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  import fencePre from './components/fencePre'
  import fenceFormal from './components/fenceFormal'

  export default {
    name: 'fenceUnit',
    components: {
      fencePre, fenceFormal
    },
    data() {
      return {
        activeName: 'fencePre'
      }
    },
    mounted() {
      this.changeTab()
    },
    methods: {
      changeTab() {
        this.$refs[this.activeName].updateData()
      }
    }
  }
</script>

<style lang="scss" scoped>

</style>
